<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>租用管理</title>
  <style>
    /* 样式与items.html相同 */
    .el-dialog {
      padding: 0 20px;
    }

    .add-btn {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding: 10px;
    }

    .content-header {
      position: relative;
      padding: 15px 15px 0 15px;
    }

    .content-header>h1 {
      margin: 0;
      font-size: 24px;
      font-weight: normal;
    }

    .content-header>h1>small {
      font-size: 15px;
      display: inline-block;
      padding-left: 4px;
      font-weight: 300;
    }

    .content-header>.breadcrumb {
      float: right;
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      position: absolute;
      top: 20px;
      right: 10px;
      border-radius: 2px;
    }

    .app-container {
      background: #fff;
      margin: 15px 30px 15px 15px;
    }

    .box {
      position: relative;
      border-radius: 3px;
      background: #ffffff;
      border-top: 3px solid #3c8dbc;
      padding: 10px;
      margin-bottom: 20px;
      width: 100%;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }

    .filter-container {
      padding: 10px 0 15px 0;
    }

    .filter-container .el-button,
    .filter-container .el-input__inner {
      padding: 0 15px;
      height: 34px;
      line-height: 34px;
    }
  </style>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <script src="../js/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
</head>

<body>
  <div id="app">
    <div class="content-header">
      <h1>网站管理<small>租用管理</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>租用管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="app-container">
      <div class="box">
        <div class="filter-container">
          <el-input placeholder="游戏名字" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
          <el-button @click="findSearchPage()" class="dalfBut">查询</el-button>
        </div>
        <div class="add-btn">
          <!--                <el-button type="primary" size="small" @click="beginAdd">新增公告</el-button>-->
          <el-pagination v-show="total > pageSize" @current-change="query" :current-page="lastPage"
            style="margin-top: 5px" background :page-size="pageSize" :page-sizes="pageSizes"
            @size-change="handleSizeChange" layout="prev, pager, next, total, sizes" :total="total">
          </el-pagination>
        </div>
        <el-table :data="orders" border size="small" current-row-key="order_id" stripe highlight-current-row>
          <el-table-column v-for="h in headers" :key="h.prop" :prop="h.prop" :label="h.text" :width="h.width"
            :align="h.align">
          </el-table-column>
          <el-table-column align="center" label="状态" :width="100">
            <template slot-scope="scope">
              <span>{{ getStatusText(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" :width="160">
            <template slot-scope="scope">
              <el-button type="danger" plain icon="el-icon-delete" circle size="mini"
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="公告信息" :visible.sync="formVisible" width="50%" style="padding: 0 20px;">
          <el-form :model="order" size="small" label-position="left" :label-width="formLabelWidth">
            <el-form-item label="公告内容">
              <el-input v-model="order.content" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">发布公告</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>

  <script>
    axios.defaults.baseURL = "";
    axios.interceptors.request.use(
      config => {
        config.headers['authorization'] = 'admin'
        return config
      },
      error => {
        console.log(error)
        Promise.reject(error)
      }
    )

    const app = new Vue({
      el: "#app",
      data: {
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          name: null,
          pageNo: 1
        },
        pageSize: 5,
        pageSizes: [5, 10, 20, 50, 100, 200],
        headers: [
          { prop: "id", text: "租用id", width: 120, align: "center" },
          { prop: "userAccount", text: "租用用户", width: 100, align: "center" },
          { prop: "account", text: "租用账号", width: null, align: "center" },
          { prop: "name", text: "租用游戏", width: null, align: "center" },
          { prop: "startTime", text: "租用开始时间", width: 100, align: "center" },
          { prop: "endTime", text: "租用结束时间", width: 100, align: "center" },
          { prop: "createdAt", text: "建立时间", width: 100, align: "center" },
        ],
        orders: [],
        total: 1000,
        formVisible: false,
        formLabelWidth: "100px",
        order: {
          content: ''
        },
        isEdit: false,
        lastPage: 1,
        searchList: []
      },
      created() {
        this.query()
      },
      watch: {
        pageSize() {
          this.query(1);
        }
      },
      methods: {
        findSearchPage() {
          this.lastPage = 1;
          this.query();
        },
        handleSizeChange(s) {
          this.pageSize = s;
        },
        query(page) {
          this.lastPage = page;
          axios.get("/rentals/page", {
            params: {
              pageNo: this.lastPage ? this.lastPage : 1,
              pageSize: this.pageSize,
              name: this.pagination.name
            }
          })
            .then(resp => {
              this.orders = resp.data.records;
              this.total = parseInt(resp.data.total);
            })
            .catch(err => {
              console.log(err)
            });
        },
        // handleEdit(v1, v2) {
        //     this.isEdit = true;
        //     this.order = JSON.parse(JSON.stringify(v2));
        //     this.formVisible = true;
        // },
        handleDelete(v1, v2) {
          this.$confirm('此操作永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteById(v2.id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        async saveOrUpdate() {
          const data = new FormData()
          for (const key in this.order) {
            if (key == 'createdAt' || key == 'updatedAt') {
              continue
            }
            data.append(key, this.order[key])
          }
          const res = await axios.post("/rentals/saveOrUpdate", data)
          const { code, msg } = res.data
          if (code !== 200) {
            this.$message({
              message: msg,
              type: 'error'
            });
            return
          }
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.formVisible = false
          this.query()
        },
        beginAdd() {
          this.isEdit = false;
          this.item = {};
          this.formVisible = true;
        },
        deleteById(id) {
          axios.get("/rentals/delete", { params: { id: id } })
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.reload();
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
              console.log(err);
            })
        },
        reload() {
          this.query(this.lastPage);
        },
        getStatusText(status) {
          switch (status) {
            case 0:
              return '已结束';
            case 1:
              return '进行中';
          }
        }
      }
    })
  </script>
</body>

</html>